<h2></h2>
<p>Wizualny generator formularzy</p>

<div class="options">
	<ul>
		<li><a id="forms-preview" title="Podgląd projektu">Podgląd</a></li>
		<li><a id="forms-save" title="Zapisz projekt">Zapisz</a></li>
		<li><a id="forms-help" title="Pomoc">Pomoc</a></li>
		<li><a id="forms-trash" title="Kosz">Kosz</a></li>
	</ul>
</div>

<div class="brake"></div>

<div id="forms-content">
	<h3>Formularz</h3>
	<div class="options">
		<a href="" id="form-element-wraper-add">Dodaj nowe pole formularza</a>
	</div>
</div>
<div id="forms-navigation">
	<h3>Przybornik</h3>
	<div id="forms-elements">
		<div class="form-element" id="input-text">
			<span>Pole tekstowe</span>
			<input type="text" value="" />
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-textarea">
			<span>Pole Treści</span>
			<textarea></textarea>
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-radio">
			<span>Pole radio</span>
			<input type="radio" value="" />
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-select">
			<span>Pole listy</span>
			<select>
				<option>lista elementów</option>
			</select>
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-checkbox">
			<span>Pojedyńcze zaznaczenie</span>
			<input type="checkbox" value="" />
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-multicheckbox">
			<span>Multi zaznaczenie</span>
			<input type="checkbox" value="" /> element_1,
			<input type="checkbox" value="" /> element_2
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-submit">
			<span>Wyślij formularz</span>
			<input type="submit" name="Submit" value="Wyślij"/>
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
		<div class="form-element" id="input-reset">
			<span>Resetuj formularz</span>
			<input type="reset" name="Reset" value="Resetuj"/>
			<div class="options">
				<ul>
					<li><a class="delete" title="Usuń">Usuń</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div id="forms-options">
		<h4>Ustawienia</h4>
		<div class="options">
			<a id="forms-options-close" href="">X</a>
		</div>
		<dl>
			<dt>Pole wymagane?</dt>
			<dd><input type="checkbox" name="required" value="true" /> tak</dd>
			<dt>Wartość min/max</dt>
			<dd>
				<input style="width: 30px" type="text" name="strlen_min" value="" />/
				<input style="width: 30px" type="text" name="strlen_max" value="" />
			</dd>
			<dt>Pole email?</dt>
			<dd><input type="checkbox" name="email" value="true" /> tak</dd>
			<dt>Elementy</dt>
			<dd>
				<textarea name="elements"></textarea>
				<p class="info small70">Wypisz elementy dla pola listy dodzielając każdy element przecinkiem. <u>Tylko dla: "Pole listy", "Multi zaznaczenie"</u></p>
			</dd>
		</dl>
	</div>
</div>

<div class="clear"></div>

<div id="forms_preview_dialog">
</div>

<div id="forms_debug">
	<pre></pre>
</div>

<div id="forms_save_dialog">
	<dl class="zend_form">
		<dt><label class="optional" for="nazwa">nazwa</label></dt>
		<dd>
			<input type="text" value="" id="nazwa" name="name"/>
		</dd>
		<dt></dt>
		<dd>
			<input type="submit" value="Zapisz" id="save" name="save"/>
		</dd>
	</dl>

	<h4>Wczytaj formularz</h4>
	<div id="forms_load_data"></div>
</div>

<div id="forms_help_dialog">
	<h2>Tworzenie pola formularza</h2>
	<h3>Jak utworzyć nowe pole formularza?</h3>
	<p>Kliknij na przycisk: <u><img src="css/images/application_form_add.png" alt="" /> Dodaj nowe pole formularza</u> lub jeżeli chcesz skopiować istniejące pole kliknij na ikonę <img src="css/images/clone.png" alt="" /></p>
	<h3>Jak dodać element formularza do nowego pola formularza?</h3>
	<p>Przeciągnij wybrany element z przybornika (prawy panel) i upuść go na wybranym polu formularza (lewy panel).</p>
	<h3>Jak usunąć element formularza lub pole formularza?</h3>
	<p>Kliknij na ikonę <img src="css/images/delete.png" alt="" /> lub przeciągnij wybrany element na ikonę kosza (prawy górny róg strony)</p>
	<h3>Po co są ustawienia elementu?</h3>
	<p>Możesz dzięki nim określić np. ustawienia poprawności dla elementu. (np.: czy element musi być wypełniony czy też może pozostać pusty)</p>
	<h3>Jak zmienić ustawienia elementu?</h3>
	<p>Kliknij na element formularza, po prawej stronie pojawi się pole konfiguracji</p>
</div>

<div id="forms-base">
	<div class="form-element-wraper">
		<dir class="form-element-label"><input type="text" name="label" value="etykieta" /></dir>
		<dir class="form-element-handler"></dir>
		<dir class="form-element-wraper-options">
			<ul>
				<li><a class="delete" title="Usuń">Usuń</a></li>
				<li><a class="move-up" title="Do gór">Do góry</a></li>
				<li><a class="move-down" title="W dół">W dół</a></li>
				<li><a class="clone" title="Klonuj">Klonuj</a></li>
			</ul>
		</dir>
		<div class="clear"></div>
	</div>
</div>